d3 Axis

用途

d3.axis此API可以幫我們生成軸線的資料參考，也就是X軸Y軸的相對應的值。當然這也可以自己實作，但有方便的API可以直接使用，無疑是省了許多力氣。

使用方法

舉例我想要產生Y軸的資料參考軸線，可以使用d3.axisLeft在線的左側產生值。

// API
d3.axisLeft(scale) // scale就是放置計算好的scale值。

因為scale需透過range和domain，其實已經了解整個最大最小值，已經對應的比例，所以可以產生出軸線資料。

// 實際使用
const svg = d3.select('svg').attr('width', 800).attr('height', 600);
// d3 select一個SVG，並設定寬高800和600。
const layer = svg.append('g').attr('transform', `translate(30, 30)`);
// 使用g來製作一個區塊，並把這區塊位移X 30 Y30，類似padding，不然我們的左測Axis會超出邊界。
const datas = [10, 2, 3, 4, 6, 8, 1];
// 資料來源一個簡單陣列
const extent = d3.extent(datas);
// 算出最大最小值(Max 10) (Min 1)
const scale = d3.scaleLinear().range([0, 540]).domain(extent);
// 算出 scale值，因為有周圍的padding，因此我僅算540的高度(600 - 30 - 30)
const axis = d3.axisLeft(scale)
// 產生axis
layer.call(axis);
// 透過layer執行axis，軸線就會產生在該元件(layer)上。

結果

d3.axisTop

當然也有axisTop, axisRight, axisBottom以此類推。

const svg = d3.select('svg').attr('width', 800).attr('height', 600);
const layer = svg.append('g').attr('transform', `translate(30, 30)`);
const datas = [10, 2, 3, 4, 6, 8, 1];
const extent = d3.extent(datas);
const scale = d3.scaleLinear().range([0, 740]).domain(extent);
const axis = d3.axisTop(scale);
// 使用axisTop

layer.call(axis);

d3.axis.tickValues

這tickValues其實就是讓我們可以自己自訂我們想要的資料參考有哪些，可能不想要自動產生的，想要特定幾個值就好。

比如以下我只想要1, 5, 10就好。

const svg = d3.select('svg').attr('width', 800).attr('height', 600);
const layer = svg.append('g').attr('transform', `translate(30, 30)`);
const datas = [10, 2, 3, 4, 6, 8, 1];
const extent = d3.extent(datas);
const scale = d3.scaleLinear().range([0, 740]).domain(extent);
const axis = d3.axisTop(scale).tickValues([1, 5, 10]);
// 使用陣列傳入
layer.call(axis);

d3.axis.tickFormat

axis.tickFormat這API是用來自訂資料的格式，可能日期格式、數字小數位數等等。

const svg = d3.select('svg').attr('width', 800).attr('height', 600);
const layer = svg.append('g').attr('transform', `translate(30, 30)`);
const datas = [10, 2, 3, 4, 6, 8, 1];
const extent = d3.extent(datas);
const scale = d3.scaleLinear().range([0, 740]).domain(extent);
const axis = d3.axisTop(scale);
axis.tickFormat(d3.format(".0%"));
// 產生百分比
layer.call(axis);

d3.axis.tickSize

axis.tickSize此Size是資料參考該點的提示線，預設也就是突起的一小根，輸入正的話，會朝向該資料參考的方向，而輸入負，會朝向相反的地方。可以用來產生格線。

const svg = d3.select('svg').attr('width', 800).attr('height', 600);
const layer = svg.append('g').attr('transform', `translate(30, 30)`);
const datas = [10, 2, 3, 4, 6, 8, 1];
const extent = d3.extent(datas);
const scale = d3.scaleLinear().range([0, 740]).domain(extent);
const axis = d3.axisTop(scale).tickSize(-600);
// -600會讓資料參考位置的提示線往後移動-600。
layer.call(axis);

d3.axis.tickPadding

axis.tickPadding此為資料參考的提示線與資料參考的數值的距離。

const svg = d3.select('svg').attr('width', 800).attr('height', 600);
const layer = svg.append('g').attr('transform', `translate(30, 30)`);
const datas = [10, 2, 3, 4, 6, 8, 1];
const extent = d3.extent(datas);
const scale = d3.scaleLinear().range([0, 740]).domain(extent);
const axis = d3.axisTop(scale).tickPadding(10);

layer.call(axis);

結論

以上範例連結：Codepen
Axis雖然外觀看起來很簡陋不是特別美，但可以很方便調用而且也API也非常簡單，真的是快速產生圖表的好幫手！

參考

d3-axis